import 'package:flutter/material.dart';
import 'dart:async';

class BottomSheetDemo extends StatefulWidget {
  BottomSheetDemo({Key key}) : super(key: key);

  @override
  _BottomSheetDemoState createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {

  final _bottomSheetScaffodKey = GlobalKey<ScaffoldState>();

  void _openBottomSheet() {
    _bottomSheetScaffodKey.currentState.showBottomSheet((context) => BottomAppBar(
      child: Container(
        height: 90.0,
        width: double.infinity,
        child: Row(
          children: <Widget> [
            Icon(Icons.pause_circle_outline),
            SizedBox(width: 16.0),
            Text("01:30 / 03:30"),
            Expanded(
              child: Text(
                "Fix you - Coldplay",
                textAlign: TextAlign.right,
              ),
            ),
          ],
        ),
      ),
    ));
  }

  Future _openModalBottomSheet() async {
    final String action = await showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 200.0,
        child: Column(
          children: <Widget> [
            ListTile(
              title: Text("Option A"),
              onTap: () {
                Navigator.pop(context, 'A');
              },
            ),
            ListTile(
              title: Text("Option B"),
              onTap: () {
                Navigator.pop(context, 'B');
              },
            ),
            ListTile(
              title: Text("Option C"),
              onTap: () {
                Navigator.pop(context, 'C');
              },
            ),
          ],
        ),
      ),
    );

    debugPrint("Action: $action");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffodKey,
      appBar: AppBar(
        title: Text("BottomSheetDemo"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlatButton(
                  onPressed: _openBottomSheet, 
                  child: Text("Open BottomSheet"),
                ),
                FlatButton(
                  onPressed: _openModalBottomSheet, 
                  child: Text("Open ModalBottomSheet"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}